<template>
  <el-form style="padding: 12px;" ref="form">
    <div style="color:red; margin: 10px 0;">模板请用$Field#标记属性名后导入</div>
    <el-row>
      <el-col :span="24">
        <el-form-item label="选择文件：">
          <input type="file" @change="getFile($event)" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button @click="downTemplate(2)">下载模版</el-button>
        <el-button @click="upload">导入</el-button>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import Controller from "@/libs/framework/controller";
import request from "@/utils/request";

export default class Instance extends Controller {
  mixin() {
    return {
      props: {
        uploadUrl: {
          type: String,
          required: true,
        },
      },
      data() {
        return {
          file: "",
        };
      },
      methods: {
        downTemplate(type) {
          location.href =
            process.env.VUE_APP_SERVER +
            "/import/importTemplateDownload?type=" +
            type;
        },
        getFile(event) {
          this.file = event.target.files[0];
        },
        upload() {
          if (!this.file) {
            this.notifyError("请选择文件上传");
            return;
          }
          let formData = new FormData();
          formData.append("file", this.file);

          request({
            url: this.uploadUrl,
            method: "post",
            data: formData,
            header: { "Content-Type": "multipart/form-data" },
          })
            .then((r) => {
              if (r && r.success) {
                this.notifySuccess("导入成功");
                this.$emit("modal-close");
              } else {
                this.notifyError((r || {}).message || "导入失败");
              }
            })
            .catch((e) => {
              this.notifyError((e || {}).message || "导入失败");
            });
        },
      },
    };
  }
}
</script>

<style scoped>
</style>